<script setup lang="ts">
const props = defineProps({
  itemInfo: {
    type: Object,
    default: () => {},
  },
})

const userStore = useUserStore()
function checkCollect() {
  if (userStore.isLogin) {
    props.itemInfo!.isCollect = !props.itemInfo.isCollect
  } else {
    userStore.changeShowLogin(true)
  }
}

function gotoActivity() {
  if (userStore.isLogin) {
    showNotify({ type: 'success', message: '已登录，此处可前往活动页面' })
  } else {
    userStore.changeShowLogin(true)
  }
}
</script>

<template>
  <div v-click-move class="game_max_box_one game_box" @click="gotoActivity">
    <div class="game_box_max">
      <div class="img_box">
        <div class="game_icon_bg" />
        <img class="game_icon" :src="itemInfo.img" loading="lazy">
      </div>
      <div class="flag_box" @click.stop="checkCollect">
        <img v-if="itemInfo.isCollect" src="/images/layout/icon-fav2.png" loading="lazy">
        <img v-else src="/images/layout/icon-fav1.png" loading="lazy">
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.game_max_box_one {
  display: flex;
}
.game_box_max {
  position: relative;
  width: 100%;
  border-radius: 0.2rem;
  overflow: hidden;
}
.img_box {
  display: flex;
  width: 100%;
  position: relative;
  overflow: hidden;
}
.img_box .game_icon_bg {
  width: 100%;
  height: 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--theme-neutral1);
  background: #00000080;
  font-weight: 600;
}
.img_box .game_icon_bg img {
  width: 0.6rem;
  margin-bottom: 0.2rem;
}
.img_box .game_icon {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  transform: scale(1);
  border-radius: var(--border-radius);
}
.flag_box {
  cursor: pointer;
  position: absolute;
  right: 6%;
  top: 0%;
  padding: 0.05rem 0.1rem 0.17rem;
  z-index: 10;
  background-color: var(--mask-color);
  border-radius: 0 0 50% 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.flag_box img {
  width: 0.4rem;
}
</style>
